<template>
    <cl-crud :ref="setRefs('crud')" @load="onLoad">
        <el-row type="flex" align="middle">
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <cl-search-key />
        </el-row>

        <el-row>
            <!-- 数据表格 -->
            <cl-table :ref="setRefs('table')" v-bind="table">
                <!-- 轮播图 -->
                <template #column-pics="{ scope }">
                    <cl-image :size="80" :src="scope.row.pics" />
                </template>
            </cl-table>
        </el-row>

        <el-row type="flex">
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </el-row>

        <!-- 新增、编辑 -->
        <cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
    </cl-crud>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useCool } from "/@/core";

export default defineComponent({
    setup() {
        // 功能
        const { refs, setRefs, service } = useCool();

        // 新增、编辑配置
        const upsert = reactive<Upsert>({
            items: [
                {
                    label: "插画分类",
                    prop: "categoryId",
                    component: {
                        name: "original-category-select"
                    },
                    rules: {
                        required: true,
                        message: "商品分类不能为空"
                    }
                },
                {
                    label: "标题",
                    prop: "title",
                    component: {
                        name: "el-input",
                        props: {
                            clearable: true
                        },
                        attrs: {
                            placeholder: "请输入标题"
                        }
                    },
                    rules: {
                        required: true,
                        message: "商品标题不能为空"
                    }
                },
                {
                    label: "子标题",
                    prop: "subTitle",
                    component: {
                        name: "el-input",
                        props: {
                            clearable: true
                        },
                        attrs: {
                            placeholder: "请输入子标题"
                        }
                    }
                },
                {
                    label: "标签",
                    prop: "tagId",
                    value: "",
                    component: {
                        name: "tags-select",
                        attrs: {
                            placeholder: "请输入商品关键字"
                        }
                    }
                },
                {
                    label: "关键字",
                    prop: "keywords",
                    value: "",
                    hook: "splitJoin",
                    component: {
                        name: "el-select",
                        options: [],
                        props: {
                            filterable: true,
                            clearable: true,
                            multiple: true,
                            "allow-create": true
                        },
                        attrs: {
                            placeholder: "请输入商品关键字"
                        }
                    }
                },
                {
                    label: "商品简介",
                    prop: "introduction",
                    component: {
                        name: "el-input",
                        props: {
                            clearable: true,
                            type: "textarea"
                        },
                        attrs: {
                            placeholder: "请输入商品简介",
                            rows: 4
                        }
                    }
                },
                {
                    label: "轮播图",
                    prop: "pics",
                    component: {
                        name: "cl-upload",
                        props: {
                            multiple: true,
                            limit: 5,
                            listType: "picture-card"
                        }
                    },
                    // rules: {
                    //     required: true,
                    //     message: "商品轮播图不能为空"
                    // }
                },
                {
                    label: "期望价格",
                    prop: "quotPrice",
                    span: 12,
                    component: {
                        name: "el-input",

                        props: {
                            disabled: true
                        },
                        attrs: {
                            placeholder: "请输入"
                        }
                    }
                },
                {
                    label: "实际售价",
                    span: 12,
                    prop: "price",
                    component: {
                        name: "el-input-number",

                        props: {
                            clearable: true,

                        },
                        rules: {
                            required: true,
                            message: "商品标题不能为空"
                        },
                        attrs: {
                            placeholder: "请输入"
                        }
                    }
                },
                {
                    label: "库存",
                    span: 12,

                    prop: "inventory",
                    component: {
                        name: "el-input-number",

                        props: {
                            clearable: true
                        },
                        attrs: {
                            placeholder: "请输入库存"
                        }
                    }
                },
                {
                    label: "排序",
                    prop: "orderNum",
                    value: 0,
                    span: 12,
                    component: {
                        name: "el-input-number",
                        props: {
                            min: 0,
                            max: 1000
                        }
                    }
                },
                {
                    label: "状态",
                    prop: "status",
                    value: 0,
                    component: {
                        name: "el-radio-group",
                        options: [
                            {
                                label: "审核失败",
                                value: -1
                            },
                            {
                                label: "审核中",
                                value: 0
                            },
                            {
                                label: "审核通过",
                                value: 1
                            },
                            {
                                label: "上架",
                                value: 2
                            },
                            {
                                label: "下架",
                                value: 3
                            }
                        ]
                    }
                },

            ]
        });

        // 表格配置
        const table = reactive<Table>({
            columns: [
                {
                    type: "selection",
                    width: 60
                },
                {
                    label: "ID",
                    prop: "id",
                    minWidth: 80
                },
                {
                    label: "图片",
                    prop: "pics",
                    minWidth: 100
                },
                {
                    label: "名称",
                    prop: "title",
                    minWidth: 160,
                    showOverflowTooltip: true
                },
                {
                    label: "售价",
                    prop: "price",
                    sortable: "custom",
                    minWidth: 120,
                },
                {
                    label: "销量",
                    prop: "sales",
                    sortable: "custom",
                    minWidth: 100
                },
                {
                    label: "排序",
                    prop: "orderNum",
                    sortable: "custom",
                    minWidth: 100
                },
                {
                    label: "状态",
                    prop: "status",
                    dict: [
                        {
                            label: "审核失败",
                            value: -1,
                            type: "danger"
                        },
                        {
                            label: "审核中",
                            value: 0,
                            type: "warning"
                        },
                        {
                            label: "审核通过",
                            value: 1,
                        },
                        {
                            label: "上架",
                            value: 2,
                            type: "success"
                        },
                        {
                            label: "下架",
                            value: 3,
                            type: "info"
                        }
                    ],
                    minWidth: 100
                },
                {
                    label: "创建时间",
                    prop: "createTime",
                    sortable: "custom",
                    minWidth: 150
                },
                {
                    label: "操作",
                    type: "op",
                    buttons: ["edit", "delete"]
                }
            ]
        });

        // crud 加载
        function onLoad({ ctx, app }: CrudLoad) {
            // 绑定 service
            ctx.service(service.original.info).done();
            app.refresh();
        }

        return {
            refs,
            setRefs,
            upsert,
            table,
            onLoad
        };
    }
});
</script>
